<!--
 * @Author: boyyang
 * @Date: 2022-01-08 19:46:14
 * @LastEditTime: 2022-02-19 16:11:46
 * @LastEditors: boyyang
 * @Description: 
 * @FilePath: \boyyang\src\views\home\components\homeMenu.vue
-->

<template>
    <div class="home-menu-wrapper">
        <div class="home-menu" @mouseenter="enter" @mouseleave="leave">
            <home-menu-header
                :size="isShow ? 100 : 60"
                :is-show-name="isShow"
                :header="userStore.userInfo?.avatarUrl"
                :name="userStore.userInfo?.nickName"
                border-color="whitesmoke"
                @headerClick="headerClick"
            ></home-menu-header>
            <div class="home-menu-item-wrapper">
                <template v-for="(item, i) in menu" :key="i">
                    <home-menu-item
                        :is-show="isShow"
                        :name="item.name"
                        :icon-name="item.iconName"
                        :hover-bg="item.hoverBg"
                        :tag="i"
                        @itemClick="itemClick"
                    ></home-menu-item>
                </template>
            </div>

            <home-menu-bottom :icons="bottomMenu" @iconClick="iconClick"></home-menu-bottom>
        </div>
    </div>
</template>

<script lang="ts" setup>
import homeMenuHeader from './homeMenuHeader.vue'
import homeMenuItem from './homeMenuItem.vue'
import homeMenuBottom from './homeMenuBottom.vue'

import { useRouter } from 'vue-router'
import { signOut } from '@/cloudbase'
import { useMessage } from '@/components/message'
import { useUserStore } from '@/store/modules/user'

interface IHomeMenuEmits {
    (e: 'headerClick'): void;
    (e: 'imgUpload'): void;
    (e: 'settingClick'): void;
}

const userStore = useUserStore()
const router = useRouter()
const message = useMessage()
const emits = defineEmits<IHomeMenuEmits>()

const isShow = ref<boolean>(false)

const menu = ([
    {
        iconName: 'icon-boke2',
        name: 'Blog',
        hoverBg: '#3d3b4f'
    },
    {
        iconName: 'icon-tupian1',
        name: 'Album',
        hoverBg: '#3d3b4f'
    },
    {
        iconName: 'icon-shangchuan4',
        name: 'Upload',
        hoverBg: '#3d3b4f'
    },
    {
        iconName: 'icon-yinle9',
        name: 'Music',
        hoverBg: '#3d3b4f'
    },
    {
        iconName: 'icon-70BasicIcons-all-65',
        name: 'Video',
        hoverBg: '#3d3b4f'
    }
])

const bottomMenu = ([
    {
        iconName: 'icon-githubcolor',
        iconColor: 'white',
        iconSize: '24'
    },
    {
        iconName: 'icon-shezhi',
        iconColor: 'white',
        iconSize: '24'
    },
    {
        iconName: 'icon-tuichu2',
        iconColor: 'white',
        iconSize: '24'
    },
])

// 鼠标移动到menu
const enter = (): void => {
    isShow.value = true
}
// 鼠标离开menu
const leave = (): void => {
    isShow.value = false
}

// 头像点击
const headerClick = () => {
    emits('headerClick')
}

// 上面icon
const itemClick = (e: any) => {
    switch (e) {
        case 0:
            router.push({
                name: 'Blog'
            })
            break
        case 1:
            router.push({
                name: 'ImagesExhibition'
            })
            break
        case 2: //图片上传
            emits('imgUpload')
            break
        case 3:
            router.push({
                name: 'Music'
            })
            break
        case 4:
            router.push({
                name: 'GameVideoExhibition'
            })
            break
        default:
            return
    }
}

// 下面icon
const iconClick = (e: any) => {
    switch (e) {
        case 0:
            window.open('https://github.com/boyyang-love/boyyang', '_black')
            break
        case 1:
            emits('settingClick')
            break
        case 2:
            signOut()
            message.success('退出登录成功')
            router.push({
                name: 'Login'
            })
            break
        default:
            return
    }
}

</script>

<style scoped lang="scss">
.home-menu-wrapper {
    height: 100vh;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding-left: 3%;
    overflow: hidden;
    width: 100%;
    animation: move 0.4s linear;

    .home-menu {
        box-sizing: border-box;
        width: 75px;
        height: 85%;
        background-color: rgba(61, 59, 79, 0.5);
        border-radius: 15px;
        padding: 10px 0 25px;
        z-index: 9;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        overflow: hidden;
        position: relative;

        transition: all 0.4s linear;

        &:hover {
            width: 220px;
        }
    }

    @keyframes move {
        0% {
            padding-left: 0%;
        }

        100% {
            padding-left: 3%;
        }
    }
}

.home-menu-item-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width: 500px) {
    .home-menu-wrapper {
        .home-menu {
            height: 95%;
        }
    }
}
</style>